<template>
	<div>
		<dz-header title="我的"></dz-header>
		<h1 style="color:red;margin-bottom:50px;">Mine.vue 我的</h1>
		<van-cell-group>
			<van-field v-model="rusername" required clearable label="用户名" right-icon="question-o" placeholder="请输入用户名" @click-right-icon="$toast('question')" />
			<van-field v-model="rpassword" type="password" label="密码" placeholder="请输入密码" required />
			<van-field>
				<van-button slot="button" size="small" type="primary" @click="userRegister()">注册</van-button>
			</van-field>
		</van-cell-group>
		<van-cell-group>
			<van-field v-model="lusername" required clearable label="用户名" right-icon="question-o" placeholder="请输入用户名" @click-right-icon="$toast('question')" />
			<van-field v-model="lpassword" type="password" label="密码" placeholder="请输入密码" required />
			<van-field>
				<van-button slot="button" size="small" type="primary" @click="userLogin()">登录</van-button>
			</van-field>
		</van-cell-group>
		<van-cell-group>
			<van-field>
				<van-button slot="button" size="small" type="primary" @click="userAuth()">验证</van-button>
			</van-field>
		</van-cell-group>
	
		<h1>{{ this.token }}</h1>
	</div>
</template>

<script>
import dzHeader from "@/components/tabbar/Header";
import { mapState, mapMutations } from 'vuex';
// import { swiper, swiperSlide } from "vue-awesome-swiper";
import { Field } from 'vant';
export default {
	name: "mine",
	components: {
		dzHeader,
		// swiper,
		// swiperSlide,
		[Field.name]: Field,
	},
	data() {
		return {
			lusername: '',
			lpassword: '',
			rusername: '',
			rpassword: '',
			swiperOption: {
				pagination: {
					el: ".swiper-pagination"
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev"
				}
			}
		};
	},
	computed: {
		// swiper() {
		// 	return this.$refs.mySwiper.swiper;
		// }
		...mapState({
			token: state => state.user.token
		})
	},
	mounted() {
		// current swiper instance
		// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
		// console.log("this is current swiper instance object", this.swiper);
		// this.swiper.slideTo(3, 1000, false);
	},
	methods: {
		...mapMutations(['setToken']),
		userRegister() {
			this.$axios
				.post("http://127.0.0.1:3000/user/actions/signup",{
					name: this.rusername,
					password: this.rpassword
				})
				.then(result => {
					// console.log(result.data.result);
					console.log(result.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		userLogin() {
			// this.setToken('12345678901');
			this.$axios
				.post("http://127.0.0.1:3000/user/actions/login",{
					name: this.lusername,
					password: this.lpassword
				})
				.then(result => {
					// console.log(result.data.result);
					console.log(result.data);
					this.setToken(result.data.token);
				})
				.catch(err => {
					console.log(err);
				});
		},
		userAuth() {
			this.$axios
				.post("http://127.0.0.1:3000/user/actions/auth",{
					name: this.rusername,
					password: this.rpassword
				})
				.then(result => {
					// console.log(result.data.result);
					console.log(result.data)
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "swiper/dist/css/swiper.css";
h1 {
	margin-top: 64px;
}
</style>